import React, { useRef, useState, useEffect } from 'react'
import { PageContainer } from '@ant-design/pro-layout'
import { PlusOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Avatar, Switch, message, Tag } from 'antd';
import ProTable from '@ant-design/pro-table';
import { getOrders } from '@/services/orders'
import { set } from 'lodash';
import CreateOrEdit from './components/CreateOrEdit';
import OrderDetails from './components/OrderDetails';
const User = () => {
  //表格的ref，便于自定义操作表格
  const actionRef = useRef()
  //将表单初始化的值设置为状态，在编辑的时候，使用这个状态
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [isDetailsVisible, setIsDetailsVisible] = useState(false)

  const [editId, setEditId] = useState(undefined)
  //定义标签状态
  const status = [
    '',
    <Tag color="green">下单</Tag>,
    <Tag color="green">支付</Tag>,
    <Tag color="green">发货</Tag>,
    <Tag color="green">收货</Tag>,
    <Tag color="red">过期</Tag>,
  ]
  //控制发货模态框显示和隐藏
  const isShowModal = (show, id = undefined) => {
    setEditId(id)
    setIsModalVisible(show)
  }
  //控制相求模态框显示和隐藏
  const isShowDetails = (show, id = undefined) => {
    setEditId(id)
    setIsDetailsVisible(show)
    console.log(1);
  }
  const columns = [
    {
      title: '单号',
      dataIndex: 'order_no',
    }, {
      title: '用户',
      dataIndex: 'username'
    }, {
      title: '金额',
      dataIndex: 'amount',
      hideInSearch: true,
    }, {
      title: '状态',
      dataIndex: 'status',
      // hideInSearch: true,
      render: (_, record) => status[record.status],
      valueEnum: {
        1: { text: '下单' },
        2: { text: '支付' },
        3: { text: '发货' },
        4: { text: '收货' },
        5: { text: '过期' },
      },
    }, {
      title: '支付时间',
      dataIndex: 'pay_time',
      hideInSearch: true
    }, {
      title: '支付类型',
      dataIndex: 'pay_type',
      hideInSearch: true
    }, {
      title: '支付单号',
      dataIndex: 'trade_no',
      hideInSearch: true
    }, {
      title: '操作',
      render: (_, record) => {
        return (
          <div>
            <a onClick={() => isShowDetails(true, record.id)}>详情&emsp;</a>
            <a onClick={() => isShowModal(true, record.id)}>发货</a>
          </div>)
      },
      hideInSearch: true
    }

  ]
  //获取用户列表
  const getData = async (params) => {
    const res = await getOrders(params)
    console.log(res);
    res.data.forEach(i => i.username = i.user.name)
    return {
      data: res.data,
      success: true,
      total: res.meta.pagination.total
    }
  }
  return (
    <PageContainer>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        request={async (params = {}) => getData(params)}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        pagination={{
          pageSize: 10,
        }}
        dateFormatter="string"
        headerTitle="订单列表"
      />
      {
        //模态框隐藏的时候，不挂载组件，模态框显示时候再挂载组件，这样是为了触发子组件的生命周期
        !isModalVisible ? '' :
          <CreateOrEdit isModalVisible={isModalVisible}
            isShowModal={isShowModal} actionRef={actionRef} editId={editId} />
      }
      {
        //模态框隐藏的时候，不挂载组件，模态框显示时候再挂载组件，这样是为了触发子组件的生命周期
        !isDetailsVisible ? '' :
          <OrderDetails isDetailsVisible={isDetailsVisible}
            isShowDetails={isShowDetails} actionRef={actionRef} editId={editId} />
      }

    </PageContainer>
  )
}

export default User
